<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css" />
		<link rel="stylesheet" href="css/swiper.css" />
		<link rel="stylesheet" href="css/mint.css">
	</head>
	<script src="js/serverUrl.js"></script>
	<script src="js/vue.js"></script>
	<script src="js/mint.js"></script>
	<script src="js/moment.js"></script>
	
    
    <style type="text/css">
            
            .pointContainer {
                display: flex;
                flex-direction: column;
            }
            
            .pointItem {
                display: flex;
                flex-direction: row;
                padding-left: 10px;
                padding-top: 10px;
                padding-right: 10px;
                background-color: white;
                padding-bottom: 10px;
                border-top: 1px solid darkgray;
            }
            
            .pointInfo {
                flex: 1;
                display: flex;
                flex-direction: column;
            }
            
            .pointInfoRow {
                display: flex;
                flex-direction: row;
                justify-content: space-between;
            }
            
            .pointName{
                font-size: 14px;
                color: black;
                font-weight: bold;
            }
            
            .pointRule{
                font-size: 12px;
                color: #FEB26E;
            }
            .progressContainer{
                width: 100%;
                background-color: #C0C0C0;
                height: 4px;
                border-radius: 2px;
                margin-top: 8px;
            }
            .progress{
                height: 100%;
                background-color: #C7000A;
                border-radius: 2px;
            }
            .btnContainer{
                width: 110px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .pointScore{
                margin-top: 8px;
                color: #bdbdbd;
                font-size: 12px;
            }
            .toLook{
                color: white;
                padding: 8px 12px 8px 12px;
                background-color: #C7000A;
                border-radius: 5px;
                font-size: 14px;
            }
            .pointTab{
                height: 35px;
                width: 100%;
                background-color: white;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .pointRuleLabel{
                padding-left: 5px;
                border-left: 5px solid #C7000A;
                margin-left: 10px;
                font-weight: bold;
                font-size: 16px;
            }
            
            .pointGoalLabel{
                margin-right: 20px;
                font-size: 4vw;
            }
            .userPointContainer{

                height: 35vw;
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .userPointLabel{
                font-size: 4vw;
                color: white;
                margin-top: 10vw;
            }
            .userPointValue{
                font-size: 25px;
                font-weight: bold;
                color: white;
                margin-top: 10px;
            }
            .pageContainer{
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                background-color: #C7000A;
                align-items: center;
            }
            .toRank{
                font-size: 3.5vw;
                height: 7vw;
                background-color: #f1913b;
                color: white;
                display: flex;
                align-items:center;
            }
        </style>
	<body>
		<div id="app">
            <div class="pageContainer">
                <div class="toRank"
                    @click.stop="toIntroduce()"
                style="border-top-right-radius: 3.5vw;
                 border-bottom-right-radius: 3.5vw;
                 padding-left: 15px;
                 padding-right: 20px;">积分说明</div>
                
                <div class="userPointContainer">
                    <div class="userPointLabel">成长总积分</div>
                    <div class="userPointValue">{{point.totalScore}}</div>
                </div>
                
                <div class="toRank"
                     @click.stop="toRank()"
                style="border-top-left-radius: 3.5vw;
                 border-bottom-left-radius: 3.5vw;
                 padding-left: 20px;
                 padding-right: 15px;">排行榜</div>
            </div>
            
			<div class="pointTab">
				<div class="pointRuleLabel">积分规则</div>
                <div class="pointGoalLabel">今日已获得{{point.dayScore}}积分</div>
			</div>
			<div class="pointContainer">
				<div v-for="item in point.rankList" class="pointItem">
					<div class="pointInfo">
						<div class="pointInfoRow">
							<div class="pointName">{{item.rankConfigName}}</div>
							<div class="pointRule">+{{item.rankConfigValue}}分/{{item.rankConfigContent}}</div>
						</div>
						<div class="progressContainer">
							<div class="progress" :style="{'width': item.width}"></div>
						</div>
						<div class="pointInfoRow">
							<div class="pointScore">已获{{item.rankScore}}分</div>
							<div class="pointScore">上限{{item.rankConfigLimit}}分</div>
						</div>
					</div>
					<div class="btnContainer" >
                        <div @click.stop="toLook(item.rankConfigId)"
                            v-if="(item.rankScore < item.rankConfigLimit
                                && item.rankConfigId!=null) || item.rankConfigId == 10" class="toLook">去看看</div>
					</div>
				</div>			
				
			</div>
		</div>
	</body>
	
	<script type="text/javascript">
		var app = new Vue({
		  el: '#app',
		  data: {
              point:{
                  
              }
          },
		  mounted() {
              window.getPoint = this.getPoint
		  },
		  methods:{
			  getPoint (point){
                  point.rankList.forEach(item => {
                      if(item.rankConfigLimit > 0){
                          item.width = (item.rankScore*100/item.rankConfigLimit)+"%"
                      }else {
                          item.width = "0%"
                      }
                      
                  })
                  this.point = point
			  },
             toIntroduce (){
                      WebViewJavascriptBridge.callHandler('toIntroduce',{});
              },
             toRank (){
                      WebViewJavascriptBridge.callHandler('toRank',{});
             },
             toLook(configId){
                  let params = {
                      configId:configId
                  }
                  WebViewJavascriptBridge.callHandler('toLook',params);
              }
                                         
		  }
		})
	</script>
</html>
